<script lang="ts" setup>
import { reactive, ref } from "vue"
import {
  getAgentStaticsApi,
  getSimResStaticsApi,
  getGCStaticsApi,
  getTaskStaticsApi,
  getAgentModelStaticsApi,
  getEvalModelStaticsApi,
  getGameStaticsApi,
  getTaskTagStaticsApi
} from "@/api/dashboard"
import { TaskStaticsTypeEnum, taskTypeOptions } from "@/constants/other-keys"
import { PieOptionStrategy } from "@/components/Charts"
import { useECharts } from "@/hooks/useECharts"
import { PieSeriesData } from "@/components/Charts/types/chart"
import { PieSeriesOption, SeriesOption } from "echarts"
import { GameStaticsData } from "@/api/dashboard/types/dashboard"

const contentElRef = ref<Element>()
const taskElRef = ref<HTMLElement | null>(null)
const agentElRef = ref<HTMLElement | null>(null)
const taskSeriesData = ref<PieSeriesData>([])
const agentSeriesData = ref<PieSeriesData>([])
const simResData = ref<number>(0)
const gcData = ref<number>(0)
const agentModelData = ref<number>(0)
const evalModelData = ref<number>(0)
const taskTagData = ref<number>(0)
const gameData = ref<GameStaticsData>({
  all: 0,
  static: 0,
  dynamic: 0
})
const taskChart = useECharts(taskElRef, new PieOptionStrategy().getOptions(null))
const agentChart = useECharts(agentElRef, new PieOptionStrategy().getOptions(null))
const searchData = reactive({
  task_type: "all"
})

const initTaskChart = () => {
  taskSeriesData.value = []
  getTaskStaticsApi(searchData.task_type)
    .then(({ data }) => {
      Object.keys(data.statics).forEach((key) => {
        taskSeriesData.value.push({
          // @ts-ignore
          name: `${TaskStaticsTypeEnum[key]} ${data.statics[key]}`,
          // @ts-ignore
          value: data.statics[key]
        })
      })
    })
    .catch(() => {
      taskSeriesData.value = []
    })
    .finally(() => {
      taskChart.options.series && ((taskChart.options.series as PieSeriesOption[])[0].data = taskSeriesData.value)
    })
}
const initAgentChart = () => {
  agentSeriesData.value = []
  getAgentStaticsApi()
    .then(({ data }) => {
      Object.keys(data.statics).forEach((key) => {
        agentSeriesData.value.push({ name: `${key} ${data.statics[key]}`, value: data.statics[key] })
      })
    })
    .catch(() => {
      agentSeriesData.value = []
    })
    .finally(() => {
      agentChart.options.series && ((agentChart.options.series as SeriesOption[])[0].data = agentSeriesData.value)
    })
}

// 仿真资源数
const getSimResStatics = () => {
  getSimResStaticsApi()
    .then(({ data }) => {
      simResData.value = data.sim_config_count
    })
    .catch(() => {
      simResData.value = 0
    })
}
// 博弈配置数
const getGCStatics = () => {
  getGCStaticsApi()
    .then(({ data }) => {
      gcData.value = data.all
    })
    .catch(() => {
      gcData.value = 0
    })
}
// 任务标签数统计
const getTaskTagStatics = () => {
  getTaskTagStaticsApi()
    .then(({ data }) => {
      taskTagData.value = data.all
    })
    .catch(() => {
      taskTagData.value = 0
    })
}
// 算法模型统计数
const getAgentModelStatics = () => {
  getAgentModelStaticsApi()
    .then(({ data }) => {
      agentModelData.value = data.all
    })
    .catch(() => {
      agentModelData.value = 0
    })
}
// 评估模型统计数
const getEvalModelStatics = () => {
  getEvalModelStaticsApi()
    .then(({ data }) => {
      evalModelData.value = data.all
    })
    .catch(() => {
      evalModelData.value = 0
    })
}
// 评估模型统计数
const getGameStatics = () => {
  getGameStaticsApi()
    .then(({ data }) => {
      gameData.value.static = data.static
      gameData.value.dynamic = data.dynamic
    })
    .catch(() => {
      gameData.value.static = 0
      gameData.value.dynamic = 0
    })
}

// 任务标签数
getTaskTagStatics()
// 场景资源统计
getGameStatics()
// 算法模型统计
getAgentModelStatics()
// 评估模型统计
getEvalModelStatics()
// 仿真资源数
getSimResStatics()
// 博弈配置统计
getGCStatics()
// 任务统计
initTaskChart()
// 智能体资源统计
initAgentChart()
</script>
<template>
  <div class="app-container" ref="contentElRef">
    <h2>项目数据统计</h2>
    <el-row :gutter="20">
      <el-col :xl="5" :lg="10" :md="10" :sm="12" :xs="24">
        <el-card class="card-number-statics">
          <div class="cns_content">
            <el-space direction="vertical" :size="20" alignment="start">
              <svg-icon name="card-icon_1" />
              <span class="label"> 仿真资源数 </span>
            </el-space>
            <span class="number"> {{ simResData }} </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="7" :lg="14" :md="14" :sm="12" :xs="24">
        <el-card class="card-number-statics">
          <div class="cns_content vertical">
            <div class="title">
              <span class="label"> 场景资源统计 </span>
              <svg-icon name="card-icon_5" />
            </div>
            <div class="item">
              <el-space direction="vertical" :size="5">
                <span class="number"> {{ gameData.static }} </span>
                <span class="describe"> 目标检测 </span>
              </el-space>
              <el-space direction="vertical" :size="5">
                <span class="number"> {{ gameData.dynamic }} </span>
                <span class="describe"> 动态博弈 </span>
              </el-space>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="5" :lg="10" :md="10" :sm="12" :xs="24">
        <el-card class="card-number-statics">
          <div class="cns_content">
            <el-space direction="vertical" :size="20" alignment="start">
              <svg-icon name="card-icon_2" />
              <span class="label"> 博弈配置统计 </span>
            </el-space>
            <span class="number"> {{ gcData }} </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="7" :lg="14" :md="14" :sm="12" :xs="24">
        <el-card class="card-number-statics">
          <div class="cns_content vertical">
            <div class="title">
              <span class="label"> 模型统计 </span>
              <svg-icon name="card-icon_4" />
            </div>
            <div class="item">
              <el-space direction="vertical" :size="5">
                <span class="number"> {{ agentModelData }} </span>
                <span class="describe"> 算法模型 </span>
              </el-space>
              <el-space direction="vertical" :size="5">
                <span class="number"> {{ evalModelData }} </span>
                <span class="describe"> 评估模型 </span>
              </el-space>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <el-card style="min-height: 300px" :body-style="{ 'min-height': '300px' }">
          <div class="card-content chart">
            <div class="toolbar">
              <span class="label"> 任务统计 </span>
              <el-select
                v-model="searchData.task_type"
                placeholder="请选择"
                style="width: 240px"
                @change="initTaskChart"
              >
                <el-option label="全部" value="all" />
                <el-option v-for="item in taskTypeOptions" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </div>
            <div ref="taskElRef" class="chart" />
          </div>
        </el-card>
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <el-card style="min-height: 300px" :body-style="{ 'min-height': '300px' }">
          <div class="card-content chart">
            <div class="toolbar">
              <span class="label"> 智能体资源统计 </span>
            </div>
            <div ref="agentElRef" class="chart" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
@import "@/styles/custom.scss";

.app-container {
  min-width: 492px;
}
.card-content {
  display: flex;
  flex-direction: column;
  .toolbar {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  & > .chart {
    height: calc(100vh - 490px);
    min-height: 300px;
  }
}
:deep(.el-card__body) {
  width: 100%;
  height: 100%;
}
.el-card {
  margin-bottom: 20px;
}
</style>
